<template>
  <div class="user-supplement">
    <navBar title="代报员订单资料调整页" @onClickLeft="onClickLeft" />
    <van-collapse v-model="action.activeClass">
      <div class="order-info">
        <van-collapse-item title="订单信息" name="1">
          <van-field readonly label="订单编号" :value="show.order.order_number" />
          <van-field readonly label="报销地点" :value="show.order.company_title" />
          <van-field readonly label="待办事项" :value="show.order.expenseCate_title" />
          <van-field readonly label="报销类型" :value="show.order.service_project_title"/>
          <van-field readonly label="报销时间" :value="show.order.service_time==0?'NA':`${show.order.service_time}天`"/>
        </van-collapse-item>

      </div>
      <van-collapse-item title="未通过资料补充区" name="3">
         <div class='order-adjust'>
          <div class='oder-adjust-item' v-for='(item,index) in show.adjustJson' :key='index'>
            <div>
              <van-cell :title="item.fieldCh" required />
              <van-uploader
                accept="image/*,.pdf"
                upload-icon="todo-list-o"
                :after-read="afterRead"
                :max-count="item.total"
                :name="item.fieldEn"
                v-model="show.previewPhoto[item.fieldEn]"
                @delete='deleteFiles'
              />
            </div>
          </div>
         </div>
      </van-collapse-item>
    </van-collapse>
    <div class="user-supplement-button">
      <van-button round block type="info" native-type="submit" @click="onSubmit"
        >提交</van-button
      >
    </div>
  </div>
</template>

<script>
import navBar from "@cb/navBar.vue";
import axios from "axios";
import { get } from "../../../../public/API/query";
import config from '../../../../public/config.js';
import { Toast,ImagePreview} from "vant";
export default {
  components: {
    navBar,
  },
  data() {
    return {
      // 从接口请求的数据
      online:{
        needJson:null,
        oldJson:null,
      },
      // 用于展示的数据
      show:{
        //调整区图片预览
        previewPhoto:{},
        order:{},
        //需要更改的文件
        needJson:[],
        adjustJson:[],
        reasonList:[]
      },
      // 用户操作选择的数据
      action:{
        activeClass:['1','2','3'],// 控制折叠面板,
      },
      // 当前页面表单提交数据
      post:{
        id:'',
        sortJson:[]
      },
    }
  },
  methods:{
    // 顶部返回
    onClickLeft(){
      this.$router.go(-1)
    },
    //订单资料区大图预览
    getBigImg(url){
      ImagePreview({
      images: [
        url
      ],
      closeable: true,
      });
    },
    // 获取订单资料调整页数据
    getData(){
      get('orderInformationAddPage',{id:this.post.id},res=>{
        if(res.code == 200){
          this.show.order = res.data.order;
          this.online.needJson = res.data.ordersSortOut.needJson;
          this.online.oldJson = res.data.ordersSortOut.oldJson;
          //处理展示的数据
          this.online.oldJson.forEach(oldItem=>{
            this.online.needJson.forEach(needItem=>{
              if(oldItem.fieldEn == needItem.fieldEn){
                needItem.fieldCh = oldItem.fieldCh;
                if(!needItem.hasOwnProperty('_child')){
                  needItem._child = [{value:oldItem.value,isSure:needItem.isSure,needExamineDataNotPass:needItem.needExamineDataNotPass}];
                }
              }
            })
          });
          // 深拷贝，不然两个数组指向同一个数组
          this.show.needJson =[]
          this.show.needJson  = JSON.parse(JSON.stringify(this.online.needJson));
          
          console.log('this.show.needJson',this.show.needJson);
          let adjustJson=[]
          res.data.ordersSortOut.oldJson.map(v=>{
            for(let i=0;i<res.data.ordersSortOut.needJson.length;i++){
              if(res.data.ordersSortOut.needJson[i].fieldEn==v.fieldEn){
                if(res.data.ordersSortOut.needJson[i].isSure==-1){
                    let total = 5;
                  if(res.data.ordersSortOut.needJson[i].fieldEn =="invoice"){
                      total = 1
                  }else{
                     res.data.ordersSortOut.needJson[i]._child.map((item,index)=>{
                         if(item.isSure == 1){
                             total --
                         }
                     }) 
                  }
                  adjustJson.push({
                    fieldEn:v.fieldEn,
                    fieldCh:v.fieldCh,
                    type:v.type,
                    total:total,
                    isArray:Array.isArray(v.value)?1:-1,
                    data:Array.isArray(v.value)?[]:'',
                  })
                }
              }
            }
          })
          this.show.adjustJson = adjustJson;
        }else if(res.code == 301){
          Toast.fail(res.data.split(':')[1])
        }
      })
    },
    // 编辑区删除图片
    deleteFiles(file,detail){
      let path = []
      this.show.adjustJson.forEach(item=>{
        if(item.fieldEn == detail.name){
          if(Array.isArray(item['data'])){
                path = item.data.splice(detail.index,1);
                
              }else{
                path = item.data;
                item.data = '';
              }
          let params = {
            path:path.toString()
          }
          axios.get(config.get('e_url')+'v1000_del',{params})
        }
      })
    },
    // 编辑区上传图片
    afterRead(file,detail){
      file.status = "uploading";
      let upfile = new FormData();
      upfile.append("file", file.file);
      axios.post(config.get('e_url')+'v1000_upload',upfile)
      .then((res) => {
        if(res.data.code == 200){
          this.show.adjustJson.forEach(item=>{
            if(item.fieldEn == detail.name){
              if(Array.isArray(item['data'])){
                item['data'].push(res.data.data);
              }else{
                item['data']=res.data.data;
              }
            }
          })
        }
        console.log(res.data.code);
        res.data.code == 200 ? (file.status = "success") : (file.status = "failed");
        //把URL压入到sortJson提交时用
        this.post.sortJson.forEach(item=>{
          if(item.fieldEn == detail.name){
            item.value.push(res.data);
          }
        })
      });
    },
    reason(){
      console.log(1)  
    },
    // 提交
    onSubmit(){
      let sortOutJson=[]
      this.show.adjustJson.map(v=>{
        sortOutJson.push({fieldEn:v.fieldEn,value:v.data})
      })
      let params = {
        id:this.post.id,
        sortOutJson:sortOutJson
      }
      let i = 0;// 记录循环次数
      sortOutJson.forEach(item=>{
        if(Array.isArray(item.value)){
          if(item.value.length != 0){
            i++
          }
        }else{
          if(item.value != ''){
           i++
          }
        }
      })
      if(sortOutJson.length == i){
        params.sortOutJson = JSON.stringify(params.sortOutJson);
        get('orderInformationAddSub',params,res=>{
          if(res.code == 200){
            Toast.success('调整资料提交成功!')
            this.$router.push('/replace/home')
          }
        }) 
      }else{
        Toast('请调整所需资料!')
      }
    },

  },
  created(){
    this.post.id = this.$route.query && this.$route.query.id;
    this.getData()
  },
  deactivated() {
    this.$destroy(true); //销毁组件
  },
};
</script>

<style lang="less" scoped>
.user-supplement{
  padding-bottom: 10%;
  // 订单资料
  .order-data{
    .order-data-item{
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      margin-bottom: 20px;
      .needBlock{
        display: block;
        width: 80px;
        padding: 0;
        height: 26px;
        text-align: center;
        line-height: 26px;
      }
      .van-image{
        margin-right: 30px;
        margin-top:5px;
        box-shadow: 1px 1px 5px #888888;
      }
    }
  }
  //订单调整
  .order-adjust{
    .order-adjust-item{
      margin-bottom: 20px;  
    }
  }
  // 提交按钮
  .user-supplement-button{
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
    margin:8% 0;
  }
}
  .needIcon{
    position: absolute;
    right: 0px;
    top: 1px;
    background: red;
    color:#fff;
    font-size:18px;
    border-radius: 50%;
    padding: 3px;
  }
/deep/ .van-uploader__preview{
  margin-right:30px;
  box-shadow: 1px 1px 5px #888888;
}
.needReason{
  width:100%;
  border-radius:5px;
  box-sizing: border-box;
  text-align: center;
  font-size:12.5px;
}
.order-headers{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  span{
    width:auto;
  }
}
#box-wrap{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.image-wrap{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width:80px;
  height:auto;
  margin:0px 25px 15px 0;
}
.dialog-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top:.2rem;
  margin-bottom:.5rem;
  span{
    padding:.1rem 0;
    font-size:13px;
    font-weight:200;
    color:#888888
  }
}
.image-icon{
  position: absolute;
  top:3px;
  right:2px;
  border-radius:50%;
  background:red;
  color:#fff;
  padding:3px;
}
</style>
<style lang="less">
